<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极客园</title>
   <style> 
      .container {
          display: flex;
          margin: 0 auto;
          justify-content: space-around;
          align-items: center;
          padding:  0 150px;
      }
      .container .left, .container .right {
        position: relative;
        /* transform: scale(0.8); */

      }
      .init, .break {
          font-size: 16px;
          text-align: center;
          color: #999;
          padding: 3px 0;
      }
      body {
          background-color: #f4f4f4;
      }
      .left img {
          margin-top: 0px;
      }
      .left .slide {
          animation: toTop linear 1s;
      }
      .toBig {
        animation: toBig linear 0.5s;
      }
      .codeview {
          position: absolute;
          width: 362px;
          height: 640px;
          background-color: #fff;
          left: 24px;
          top:99px;
      }
      #code_message {
          overflow: auto;
      }
      #code_message  .message {
          margin: 20px;
          background-color: #f3f3f3;
          padding: 10px;
          line-height: 30px;
          border-radius: 20px;
      }
      .back {
          width: 100%;
          height: 100%;
          background: pink;
          position: fixed;
          left: 0;
          top: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }
      .back .btn {
          width: 280px;
          height: 80px;
          user-select: none;
          border-radius: 8px;
          text-align: center;
          cursor: pointer;
          line-height: 80px;
          font-size: 30px;
          color: #fff;
          background-color: #409EFF;
      }
      .back .title {
          margin-bottom: 200px;
          font-size: 60px;
      }
      .navbar {
          height: 100vh;
          width: 200px;
          background-color: #f4f4f4;
          left: 0;
          top: 0;
          position: fixed;
          padding-top: 20px;
      }
      .navbar .item {
          text-align: center;
          line-height: 40px;
          font-size: 20px;
          cursor: pointer;
          user-select: none;
          /* border-bottom: 1px solid #666; */
      }
      .navbar .item:hover {
          color: blue
      }
      .navbar a {
          text-decoration: none;
          color: rgb(233, 33, 66);
      }
      a:hover {
          color: blue
      }
      .sendcode {
          top:200px;
          width: 280px;
          height: 60px;
          user-select: none;
          border-radius: 8px;
          text-align: center;
          cursor: pointer;
          line-height: 60px;
          font-size: 20px;
          color: #fff;
          background-color: #409EFF;
      }
     @keyframes toTop {
         0% {
            margin-top: 100px
         }
         100% {
            margin-top: 0;
         }
     }
     @keyframes toBig {
         0% {
            opacity: 0;
         }
         100% {
            opacity: 1 ;
         }
     }
     @media screen and (max-width: 768px) {
        .navbar {
            display: none;
        }
        .back .title {
            font-size: 30px;
        }
        .sendcode {
            width: 80%;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            font-size: 20px;
            margin-left: 10%;
        }
        #left_img {
            display: none;
        }
        .codeview {
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            position: fixed;
            margin: 0;
            top: 0;
        }
     }

   </style>

</head>
<body>
    <!-- 用作新消息提示 -->
    <audio id="msgVoice" src="./audio/welcome.mp3" autoplay  style='display: none'></audio>
    <button id="btnVoice" onclick="playVoice()" style="opacity: 0;"></button>
    <div class="title"></div>
    <div class="navbar">
        <!-- <div class="item">移动项目演示</div> -->
        <div class="item"> <a target="_blank" href="/api.html">移动端文档</a></div>
        <div class="item"> <a target="_blank" href="/api-pc.html">PC文档</a></div>
        <!-- <div class="item">课程讲义</div> -->
    </div>
    <div class="container">
        <div class="left">
            <!-- 短信验证平台 -->
            <div id="code_message" class="codeview">
            </div>
            <img id="left_img" src="./images/phone.jpg" alt="">
        </div>
        <div onclick="sendCode()" class='sendcode'>测试发送短信验证码</div>

        <div class="right">
            <div class="codeview">
                  <iframe src="./dist/index.html" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <img src="./images/phone.jpg" alt="">
        </div>
    </div>
    <div class='back'> 
        <div class='title'>欢迎来到黑马程序员-极客园</div> 
        <div class='btn' onclick="closewelcome()">查看演示</div>
   </div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/js/socket.io.min.js"></script>
    <script>

        var msgDom = $('#code_message') // 消息列表
        var msgList = [] // 消息列表
        var socket = null // 初始socket对象
        var changeVoice = false
        var initSocket = function () {
            socket =  io('http://localhost:8001?key=hmlgnb',{ 'transports': ['websocket'] } ) // 创建连接 创建连接写入秘钥
            socket.on('connect', function(){
            console.log('连接建立成功')
            addMesasge("init", "与服务器建立通讯！")
           })
           socket.on("disconnect", function () {
            console.log('连接断开')
             addMesasge("break", "与服务器通讯中断！")
           })
           socket.on('message', function (data) {
             addMesasge("message", data)
             renderList()
             $('#btnVoice').trigger('click')

           })
        }
        // 添加内容到消息区
        var addMesasge = function (type, message) {
           msgList.push({ type, message })
           renderList()
        }
        // 渲染list到消息列表
        var renderList = function () {
         var listStr = msgList.map(function (item) {
             if (item.type === 'init') {
              return `<div class='init'>${item.message}</div>`
             }
             else if (item.type === 'break') {
                return `<div class='break'>${item.message}</div>`
             }
             else if (item.type === 'message') {
                return `<div class='message'>${item.message}</div>`
             }
           })
          var height = msgDom[0].scrollHeight
          msgDom.html(listStr.join('')) 
          msgDom[0].scrollTop = height  // 滚动到底部
        }

        var  copyValue = function (dom) {
            let transfer = document.createElement('input');
             document.body.appendChild(transfer);
            transfer.value = dom.innerText;  // 这里表示想要复制的内容
             transfer.focus();
             transfer.select();
            //  transfer.style.display = 'none'
            document.execCommand("Copy")
            transfer.remove()
        }
        var play = function () {

            $('#btnVoice').trigger('click')
        }
        var playVoice = function () {
            $('#msgVoice')[0].play()
        }
        var  welcome = function () {
            $("#code_message").hide()
        }
         function closewelcome () {
            $('.back').hide()
            $("#left_img").addClass('slide')
            play()
            var dom = document.getElementById("msgVoice")
            dom.onended = function () {
                if (!changeVoice) {
                    this.src = '/audio/message.mp3'
                    changeVoice = true
                }
            }
            setTimeout(() => {
                $("#code_message").show()
                $("#code_message").addClass('toBig')
            }, 1000)
        }
        // 发送验证码
        function sendCode () {
           $.ajax({
               url: `/v1_0/sms/codes/13811111111`,
               success: function (data) {
               }, 
               error: function ({ responseJSON }) {
                alert(responseJSON.message)
               }
           })
        }
        initSocket() // 初始化websocket
        welcome()
    </script>
</body>
</html>